<template>
  <div class="container">
    <el-table id="course"  :data="classList" highlight-current-row style="width: 100%"  :header-cell-style="{background:'#EEF3FC',color:'#333333'}">
      <el-table-column
        label="序号"
        type="index"
        style="width: 8%"
        align="center">
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="课程名称">
        <template slot-scope="scope">
          <span>{{ scope.row.courseName  || '/'}}</span>
        </template>
      </el-table-column>

      <el-table-column style="width: 12%" align="center" label="课程类别">
        <template slot-scope="scope">
          <span>{{ scope.row.courseType  || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="针对年级">
        <template slot-scope="scope">
          <span>{{ scope.row.grade  || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="课程描述" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ scope.row.courseSummary  || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column  style="width: 12%" align="center" label="提交时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime  || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批人">
        <template slot-scope="scope">
          <span>{{ scope.row.resultUser || '/' }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批时间">
        <template slot-scope="scope">
          <span>{{ scope.row.resultTime || '/'}}</span>
        </template>
      </el-table-column>

      <!--<el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="提交时间">-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.tjsj }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批时间">-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.spsj }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column style="width: 12%" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="isShow === 'W'" type="text" @click="open(scope.row)">原因</el-button>
          <i v-if="isShow === 'W'">|</i>
          <el-button type="text"  @click="urlCourseDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 原因弹窗 -->
    <resion :obj="obj" @handleClose="handleClose"></resion>
  </div>
</template>

<script>
 import resion from '@/components/resion/resion'
  export default {
    components: { resion },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    props: {
      type: {
        type: String,
        default: 'D'
      },
      classList:{
        type:Array,
        return:{
          default:[]
        }
      },
      pageSizes:{
        type:Array
      },
      total:{
        type:Number
      },
      currentPage:{
        type:Number
      },
      pagesize:{
        type:Number
      }
    },
    watch: {
      classList: {
        deep: true,
        immediate: true,
        handler(val) {
          this.teacherList=val
        },
      },
      type: {
        deep: true,
        immediate: true,
        handler(val) {
          console.log('监听课程细信息过来的typetypetypetype',val)
          this.isShow=val

        },
      },
      // $route: {
      //   deep: true,
      //   immediate: true,
      //   handler(val) {
      //     console.log('tabpane这里监听路由',val)
      //   },
      // },
    },
    data() {
      return {
        list: null,
        isShow:'D',
        listQuery: {
          page: 1,
          limit: 5,
          type: this.type,
          sort: '+id'
        },
          // 子组件的数据
        obj:{
          // 是否显示弹窗
          visible:false,
          // 具体原因
          resultSummary:'这里是原因'
        }
      }
    },
    created() {
      console.log('获取课程子组件获取课程子组件获取课程子组件获取课程子组件获取课程子组件获取课程子组件',this.isShow)
      this.getList()
    },
    methods: {
      //     // 条数变化
      // handleSizeChange(val) {
      //   console.log('获取父组件的参数',this.$parent,this.$parent.pagesize)
      //   this.$parent.pagesize
      //   // let object={
      //   //   currentPage: this.currentPage, 
      //   //   pagesize:this.pagesize,
      //   //   total:this.total,
      //   // }
      //   // this.$emit('handleSizeChange',object)
      // },
      // // 换页
      // handleCurrentChange(val) {
      //   console.log('课程页数变化',val)
      //   let obj={
      //     currentPage:this.currentPage,
      //     total:this.total,
      //     val:val
      //   }
      //   this.$emit('handleCurrentChange',obj)
      // },
      // 详情跳转
      urlCourseDetail(data){
        console.log("-----------===课程详情跳转："+this.isShow)
        this.$router.push({ name: 'course-particulars',params: {id:this.isShow,item:data}})
      },
      getList() {
        this.loading = true
        this.isShow = this.listQuery.type
      },
      // 条数变化
      handleSizeChange (val) {
        this.currentPage = 1;
        this.$emit('handleSizeChange',val)
      },
      // 换页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.$emit('handleCurrentChange',val)
      },
      open(row) {
        console.log('获取原因',row)
         this.obj.resultSummary=row.resultSummary
        this.obj.visible=true
      },
        // 原因弹窗关闭
      handleClose(data){
        console.log('获取子组件关闭',data)
        this.obj.visible=data
      },

      current_change:function(currentPage){
        this.currentPage = currentPage;
      },

    }
  }
</script>
<style scoped lang='scss'>
.container{
  // 设置表格的每一个表格的高度
  /deep/.el-table td, .el-table th{
    padding: 4px 0;
  }
}

</style>

